<template>
  <div>
    <p v-red>局部自定义指令的使用</p>
    <p v-bg = "'yellow'">局部自定义指令的使用</p>
    <p v-bg = "'pink'">局部自定义指令的使用</p>


  </div>
</template>

<script>
export default {
  name:"App",
  directives:{
      /* 自定义指令函数接受的第一个参数就是当前指令要操作的真实DOM */
    red(el){
      el.style.background = "red"
    },
     /* 
      自定义指令函数接受的第二个参数就是当前指令的详细内容,包含value属性就是当前指令的值
    */
    bg(el,binding){
      el.style.background = binding.value
    }
  }

}
</script>

<style>

</style>